<template>
  <li>
    <todo-check :item="item" @todo-check="todoCheck"></todo-check>
    <todo-content :item="item"></todo-content>
    <todo-remove :item="item" @todo-remove="todoRemove"></todo-remove>
  </li>
</template>

<script>
import TodoCheck from "./TodoCheck";
import TodoContent from "./TodoContent.vue";
import TodoRemove from "./TodoRemove.vue";
export default {
  name: "TodoItem",

  data() {
    return {};
  },
  props: ["item"],
  components: {
    TodoCheck,
    TodoContent,
    TodoRemove,
  },
  mounted() {},
  create() {
    this.le();
  },
  methods: {
    todoCheck(id) {
        this.$emit('toggleCompleted', id);
    },
    todoRemove(id){
        this.$emit('todoRemove', id);
    }
  },
};
</script>

<style lang="scss" scoped>
</style>